<script setup>

    const emit = defineEmits(['closeLive'])

    let showLive = $ref(false)
    let myPlayer = $ref(null)
    let liveUrl = $ref('')

    // 显示直播
    const showLiveDialog = (data) => {
        showLive = true

        let { numb, aisle, appkey } = data

        liveUrl = `https://v.tengcity.com/video/index.html?param=${numb},${aisle},${appkey}&type=web`

    }

    // 关闭
    const handleClose = () => {
        showLive = false
        emit('closeLive')
    }
    
    defineExpose({
        showLiveDialog
    })

</script>

<template>
    <div class="visual-live-wrap" v-if="showLive">
        <div class="title flex-between">
            <a href="javascript:;" @click="handleClose">
                <img src="../../../assets/images/close.png">
            </a>
        </div>
        <div class="live-wrap">
            <iframe :src="liveUrl" frameborder="0" allowfullscreen></iframe>
        </div>
    </div>
</template>

<style lang="less" scoped>
    .visual-live-wrap{
        width: 1435px;
        height: 807px;
        background: #000;
        margin: 25px 62px;
        position: relative;

        iframe{
            width: 100%;
            height: 100%;
        }

        .title{
            height: 64px;
            margin-top: 8px;
            padding: 0 25px;
            position: absolute;
            top: 10px;
            right: 20px;

            .text{
                font-size: 30px;
                color: #fff;
                font-weight: bold;
            }
        }
        
        .live-wrap{
            margin: 0 10px;
            height: 735px;
        }
    }
</style>